<template>
	<view class="wrap">
		<view class="icon">
			<image style="width: 120rpx; height: 120rpx" mode="widthFix" src="/static/paySuccess.png"></image>
			<view class="text">付款成功</view>
		</view>
		<view class="cell">
			<view class="title" v-if="orderInfo.ownership">工程负责人接到订单后将为您安排装修服务， 并将和您取得联系，请耐心等待。</view>
			<view class="title" v-if="orderInfo.serviceTime">工程负责人接到订单后将为您安排保修服务， 并将和您取得联系，请耐心等待。</view>
			<view class="item">
				<view class="name">订单号</view>
				<view class="value">{{orderInfo.outTradeNo}}</view>
			</view>
			<view class="item" v-if="orderInfo.ownership">
				<view class="name">当前阶段</view>
				<view class="value">{{orderInfo.ownership}}</view>
			</view>
			<view class="item" v-if="orderInfo.serviceTime">
				<view class="name">保修时间</view>
				<view class="value">{{orderInfo.serviceTime}}个月</view>
			</view>
			
			<view class="item">
				<view class="name">付款金额</view>
				<view class="value">￥{{orderInfo.price}}</view>
			</view>
		</view>
		<view class="bottom">
			<u-button type="primary" shape="circle" @click="jump" text="确认并返回首页" color="#21B579"></u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderInfo: {}
		};
	},
	onLoad(options) {
		console.log(JSON.parse(options.params))
		if(options.params){
			this.orderInfo = JSON.parse(options.params)
		}
	},
	methods: {
		jump() {
			uni.switchTab({
				url: '/pages/index/index'
			});
			// this.removeStorage();
		},
		// 清除缓存保存的数据
		// removeStorage() {
		// 	uni.removeStorage({
		// 		key: 'orderInfo'
		// 	});
		// }
	}
};
</script>

<style scoped lang="scss">
.wrap {
	padding: 32rpx;
	font-size: 24rpx;
	.icon {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		font-size: 30rpx;
		color: #333333;
		margin-top: 112rpx;
		.text {
			margin-top: 28rpx;
			font-weight: 500;
		}
	}
	.cell {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;

		margin-top: 54rpx;
		.title {
			text-align: center;
			color: #666666;
			font-size: 28rpx;
			padding-bottom: 32rpx;
		}
		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: 2rpx #f8f9fa solid;
			padding: 32rpx 0;
		}
	}
	.bottom {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 32rpx;
		// background-color: #fff;
		position: fixed;
		bottom: 0rpx;
		left: 0;
		right: 0;
	}
}
</style>
